iT邦幫忙

2024 iThome 鐵人賽

DAY 29
0
自我挑戰組

asp.net可以變出那些功能系列 第 29

實用日語加入資料庫寫法:新增

  • 分享至 

  • xImage
  •  

https://laihao2.com/Home/Contact_Create
https://ithelp.ithome.com.tw/upload/images/20241006/20119035EoEKqlinth.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表>

USE [ProductDB]
GO

/****** Object:  Table [dbo].[ChineseJapaneseTable]    Script Date: 2024/10/3 下午 06:16:42 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[ChineseJapaneseTable](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Chinese] [nvarchar](max) NULL,
	[Japanese] [nvarchar](max) NULL,
	[Note] [nvarchar](max) NULL,
	[Category] [nvarchar](50) NULL,
 CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO



這段 SQL 代碼用於在名為 ProductDB 的數據庫中創建一個名為 ChineseJapaneseTable 的表。以下是對代碼的逐行解釋:

1. 數據庫選擇

USE [ProductDB]
GO

這行代碼表示將當前數據庫上下文設置為 ProductDB,後續的所有 SQL 操作都將在該數據庫中執行。

2. 對象注釋

/****** Object:  Table [dbo].[ChineseJapaneseTable]    Script Date: 2024/10/3 下午 06:16:42 ******/

這是一個注釋,說明接下來的 SQL 代碼是用於創建 ChineseJapaneseTable 表,並包含了腳本生成的日期和時間。

3. 設置選項

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO
  • SET ANSI_NULLS ON:當該選項開啟時,任何與 NULL 進行比較的條件(如 column_name = NULL)都將返回 FALSE。要檢查 NULL 值,應使用 column_name IS NULL
  • SET QUOTED_IDENTIFIER ON:當該選項開啟時,允許使用雙引號 " 來引用標識符(如列名和表名),從而可以使用關鍵字作為標識符。

4. 創建表

CREATE TABLE [dbo].[ChineseJapaneseTable](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Chinese] [nvarchar](max) NULL,
	[Japanese] [nvarchar](max) NULL,
	[Note] [nvarchar](max) NULL,
	  NULL,
  • CREATE TABLE [dbo].[ChineseJapaneseTable]:創建一個名為 ChineseJapaneseTable 的表,屬於 dbo 架構。
  • [ID] [int] IDENTITY(1,1) NOT NULL:定義一個名為 ID 的整數字段,使用 IDENTITY(1,1) 表示該字段是自動遞增的,初始值為 1,每次遞增 1,且該字段不能為空。
  • [Chinese] [nvarchar](max) NULL:定義一個名為 Chinese 的字段,數據類型為可變長度的 Unicode 字符串,最大長度為 max,可以為空。
  • [Japanese] [nvarchar](max) NULL:定義一個名為 Japanese 的字段,類型與 Chinese 相同。
  • [Note] [nvarchar](max) NULL:定義一個名為 Note 的字段,類型與 Chinese 相同。
  • NULL:定義一個名為 Category 的字段,數據類型為可變長度的 Unicode 字符串,最大長度為 50,可以為空。

5. 主鍵約束

 CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
  • CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED:定義一個主鍵約束,名為 PK__ChineseJ__3214EC27D468CAC3,並且該主鍵是聚集索引。
  • ([ID] ASC):指定以 ID 列為主鍵,並按升序排列。
  • WITH (...) ON [PRIMARY]:指定了聚集索引的一些選項,如:
    • PAD_INDEX = OFF:不填充索引頁。
    • STATISTICS_NORECOMPUTE = OFF:允許自動重新計算統計信息。
    • IGNORE_DUP_KEY = OFF:不忽略重覆鍵值錯誤。
    • ALLOW_ROW_LOCKS = ONALLOW_PAGE_LOCKS = ON:允許行級和頁級鎖。
    • OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF:不優化順序鍵。

6. 存儲位置

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
  • ) ON [PRIMARY]:指定表的存儲位置為主文件組。
  • TEXTIMAGE_ON [PRIMARY]:指示對 nvarchar(max) 類型的數據使用的存儲位置,也為主文件組。

總結

這段代碼創建了一個存儲中文和日文文本的表,便於進行多語言處理和管理,並為 ID 列設置了主鍵以確保每一行數據的唯一性。


產生Models裡面類別檔dao>按:建置>

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;
   
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    [Table("ChineseJapaneseTable")]
    public partial class ChineseJapaneseTable
    {

        [Key]
        [Display(Name = "Id")]
        public int Id { get; set; }

        // 中文字段,允許不限制長度
        [Display(Name = "中文")]
        [Column(TypeName = "nvarchar(max)")]
        public string Chinese { get; set; }

        // 日文字段,允許不限制長度
        [Display(Name = "日文")]
        [Column(TypeName = "nvarchar(max)")]
        public string Japanese { get; set; }

        // 備註字段,允許不限制長度
        [Display(Name = "備註")]
        [Column(TypeName = "nvarchar(max)")]
        public string Note { get; set; }

        // 分類字段,限定最大長度為 50
        [Display(Name = "分類")]
        [StringLength(50)]
        public string Category { get; set; }

    }

}

這段代碼定義了一個名為 ChineseJapaneseTable 的模型類,使用 C# 和 Entity Framework(EF)框架。它主要用於表示一個包含中文、日文和其他相關字段的數據庫表。以下是代碼中各部分的詳細解釋:

命名空間和引用

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
}
  • namespace WebApplication5.Models: 定義了一個命名空間,包含與 Web 應用程序相關的模型。
  • using 語句:引入了一些必要的類和命名空間,方便後續代碼的使用,例如數據注解、數據庫表的映射等。

模型類定義

[Table("ChineseJapaneseTable")]
public partial class ChineseJapaneseTable
  • [Table("ChineseJapaneseTable")]: 這個特性指定了這個模型類對應的數據庫表名為 ChineseJapaneseTable
  • public partial class ChineseJapaneseTable: 定義了一個公共的部分類(partial class),這允許類的定義在多個文件中分開。此類表示與 ChineseJapaneseTable 數據庫表相關的實體。

字段屬性

[Key]
[Display(Name = "Id")]
public int Id { get; set; }
  • [Key]: 這個特性表示 Id 屬性是該表的主鍵。
  • [Display(Name = "Id")]: 用於在用戶界面中顯示字段名稱的特性,表示這個屬性在視圖中顯示時的名稱為 "Id"。
  • public int Id { get; set; }: 定義一個名為 Id 的整數字段,代表表的唯一標識符。

接下來的字段是用於存儲中文、日文、備注和分類信息的:

[Display(Name = "中文")]
[Column(TypeName = "nvarchar(max)")]
public string Chinese { get; set; }
  • [Display(Name = "中文")]: 顯示名稱為 "中文"。
  • [Column(TypeName = "nvarchar(max)")]: 說明數據庫中的這個字段的類型為 nvarchar(max),允許存儲任意長度的字符串。
  • public string Chinese { get; set; }: 定義一個名為 Chinese 的字符串字段。

相同的方式也適用於日文和備註字段:

[Display(Name = "日文")]
[Column(TypeName = "nvarchar(max)")]
public string Japanese { get; set; }

[Display(Name = "備註")]
[Column(TypeName = "nvarchar(max)")]
public string Note { get; set; }

最後是分類字段:

[Display(Name = "分類")]
[StringLength(50)]
public string Category { get; set; }
  • [StringLength(50)]: 這個特性限制了 Category 字段的最大長度為 50 個字符。
  • [Display(Name = "分類")]: 顯示名稱為 "分類"。

總結

該類用於將數據庫中的 ChineseJapaneseTable 表映射為一個 C# 對象模型,提供了中文、日文、備注和分類的存儲結構。通過使用數據注解,這些字段還可以在視圖中以人性化的方式展示,方便用戶理解和操作。

ProductDBContext裡面也是要加入
public virtual DbSet ChineseJapaneseTable { get; set; }

Controllers裡面的Entities>

public ActionResult Contact_Create()
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
            return View();
        }
        //[AllowAnonymous]
        [HttpPost]


        public ActionResult Contact_Create(ChineseJapaneseTable cus)
        {
            if (ModelState.IsValid)
            {
                
                                                // 添加到數據庫
                _db.ChineseJapaneseTable.Add(cus);
                _db.SaveChanges();                   // 保存更改到數據庫

                return RedirectToAction("Contact");
            }

            return View(cus); // 如果模型驗證失敗,返回表單視圖並顯示錯誤信息
        }

解釋程式碼
這段 C# 代碼是一個 ASP.NET MVC 控制器的部分,涉及到創建一個聯系表單的功能。以下是對代碼的詳細解釋:

1. 方法定義

  • public ActionResult Contact_Create()

    • 這是一個 GET 請求的方法,目的是展示聯系表單的視圖。
    • ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";:設置視圖的布局文件為 _Layout.cshtml,這個文件通常是共享的布局,用於定義頁面的整體結構。
  • return View();:返回一個默認的視圖,通常是與方法同名的視圖(Contact_Create.cshtml),用於展示聯系表單。

2. HttpPost 方法

  • [HttpPost] public ActionResult Contact_Create(ChineseJapaneseTable cus)
    • 這是一個 POST 請求的方法,目的是處理用戶提交的表單數據。它接收一個參數 cus,這個參數是 ChineseJapaneseTable 類型的實例,代表表單提交的數據。

3. 模型驗證

  • if (ModelState.IsValid):檢查提交的模型(即用戶輸入的數據)是否有效。如果所有驗證通過,則執行以下操作。

4. 數據庫操作

  • _db.ChineseJapaneseTable.Add(cus);

    • 將有效的數據 cus 添加到數據庫上下文中,準備保存到 ChineseJapaneseTable 表。
  • _db.SaveChanges();:將所有掛起的更改保存到數據庫中,執行實際的插入操作。

5. 重定向

  • return RedirectToAction("Contact");
    • 在成功添加數據到數據庫後,重定向到另一個動作(通常是顯示聯系信息的頁面)。

6. 返回視圖

  • return View(cus);:如果模型驗證失敗,返回原來的視圖,並將用戶輸入的數據 cus 傳回視圖。這樣可以在視圖中顯示用戶輸入的值以及任何驗證錯誤信息。

總結

這段代碼實現了一個簡單的聯系表單提交功能,允許用戶輸入數據並將其保存到數據庫。如果輸入的數據驗證不通過,則會返回原表單以供用戶修改。在成功提交後,會重定向用戶到指定的頁面。

產生畫面View程式碼

@model WebApplication5.Models.ChineseJapaneseTable


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Contact_Create";
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Contact_Create</title>
    <style>
        .form-control {
            width: 100%; /* 或使用具体的宽度,比如 300px */
            box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的宽度 */
        }
    </style>
</head>
<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")


    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>中文和日文資料表:新增</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Chinese, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Chinese, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
                @Html.ValidationMessageFor(model => model.Chinese, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Japanese, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Japanese, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
                @Html.ValidationMessageFor(model => model.Japanese, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Note, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
                @Html.ValidationMessageFor(model => model.Note, "", new { @class = "text-danger" })
            </div>
        </div>

        @*<div class="form-group">
            @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Category, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
            </div>
        </div>*@

        <div class="form-group">
            @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
            @{
                var listItemsCategory = new List<SelectListItem>
{
                    new SelectListItem { Text = "請選擇", Value = "請選擇", Selected = true },
                    new SelectListItem { Text = "入境審查", Value = "入境審查" },
                    new SelectListItem { Text = "N2考試內容", Value = "N2考試內容" },
                    new SelectListItem { Text = "訂單", Value = "訂單" },
                    new SelectListItem { Text = "職場日文", Value = "職場日文" },
                    new SelectListItem { Text = "生活日語", Value = "生活日語" },
                    new SelectListItem { Text = "俚語", Value = "俚語" },
                    new SelectListItem { Text = "格言", Value = "格言" },
                    new SelectListItem { Text = "其他", Value = "其他" },
                    new SelectListItem { Text = "買東西", Value = "買東西" }
                };
            }
            @Html.DropDownList("Category", listItemsCategory, htmlAttributes: new { @class = "form-control", style = "width: 100%;" })
            @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="新增" class="btn btn-default" />
            </div>
        </div>
    </div>
    }

   
</body>
</html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 的 Razor 視圖,主要用於顯示一個表單,允許用戶輸入中文和日文的數據。下面是對代碼的詳細解釋:

1. 視圖模型

  • @model WebApplication5.Models.ChineseJapaneseTable
    • 指定該視圖使用的模型類型為 ChineseJapaneseTable,這意味著視圖將使用該模型的屬性來生成表單。

2. 布局和標題

  • Layout = "~/Views/Shared/_Layout.cshtml";

    • 設置該視圖的布局為 _Layout.cshtml,這是一個共享的布局文件,通常定義了頁面的總體結構(例如,導航欄、頁腳等)。
  • ViewBag.Title = "Contact_Create";

    • 設置視圖的標題為 "Contact_Create",這將用於 <title> 標簽和可能的頁面標題。

3. HTML 結構

  • <!DOCTYPE html><html><head><body>
    • 這部分代碼定義了 HTML 文檔的結構,包含文檔類型、頭部和主體部分。

4. 樣式定義

  • <style> 標簽中:
    • 設置 .form-control 的樣式,確保表單控件寬度為 100%,並且設置 box-sizing: border-box; 以避免在添加 paddingborder 時寬度變化。

5. 腳本引入

  • @Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/jqueryval")
    • 引入 jQuery 和 jQuery 驗證庫的腳本,提供表單驗證和其他 JavaScript 功能。

6. 表單創建

  • @using (Html.BeginForm())

    • 開始一個 HTML 表單,默認提交到當前控制器的 POST 動作。
  • @Html.AntiForgeryToken()

    • 用於防止跨站請求偽造 (CSRF) 攻擊,生成一個隱藏的防偽令牌。

7. 表單內容

  • 表單的整體結構為 .form-horizontal,表示使用水平排列的表單。

  • <h4>中文和日文資料表:新增</h4>

    • 表單的標題。
  • @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    • 顯示模型驗證錯誤的摘要信息(如果有的話),並使用 text-danger 類樣式顯示為紅色。

8. 輸入字段

  • 對於每個輸入字段(如 ChineseJapaneseNote),都使用以下結構:

    • @Html.LabelFor(...):生成標簽。
    • @Html.EditorFor(...):生成輸入控件,帶有 form-control 類樣式,確保寬度為 100%。
    • @Html.ValidationMessageFor(...):顯示特定字段的驗證錯誤信息(如果有的話)。
  • 分類下拉框

    • 使用 @Html.DropDownList(...) 生成下拉列表,包含多個選項,允許用戶選擇分類。
    • 選項是通過 List<SelectListItem> 創建的,包含不同的分類。

9. 提交按鈕

  • <input type="submit" value="新增" class="btn btn-default" />
    • 提交按鈕,用戶點擊時會提交表單。

10. 結尾

  • }:關閉 using 語句,結束表單的 HTML 結構。

總結

這段代碼創建了一個表單,用於輸入中文和日文的數據,並提供了分類選擇。表單中包括了適當的驗證信息,確保用戶輸入的數據有效。整體設計上,使用了 ASP.NET MVC 的 Razor 語法來動態生成 HTML,結合了表單控件的樣式和驗證功能。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
簡約風首頁看留言的地方
下一篇
加上資料表後的: 實用日語 列表
系列文
asp.net可以變出那些功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言